import { Bar, BarChart, Cell, LabelList, ResponsiveContainer, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const data = [
  { issue: "Bug", rate: 30, color: "--chart-1" },
  { issue: "Script", rate: 40, color: "--chart-2" },
  { issue: "Env", rate: 20, color: "--chart-3" },
  { issue: "Undo", rate: 10, color: "--chart-4" },
];

export function IssueBarChart() {
  return (
    <Card className="gap-2 xl:py-4 2xl:py-6">
      <CardHeader className="xl:px-4 2xl:px-6">
        <CardTitle className="text-sm">Summary of Issue distribution</CardTitle>
      </CardHeader>
      <CardContent className="h-full gap-2 xl:px-4 2xl:px-6">
        <ResponsiveContainer width="100%" height="100%" debounce={200}>
          <BarChart
            accessibilityLayer
            data={data}
            layout="vertical"
            margin={{
              top: -6,
              right: 40,
              bottom: -6,
            }}
          >
            <YAxis
              dataKey="issue"
              type="category"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
              hide
            />
            <XAxis dataKey="rate" type="number" hide />

            <Bar dataKey="rate" radius={0}>
              {data.map((entry) => (
                <Cell key={entry.issue} fill={`var(${entry.color})`} />
              ))}

              <LabelList
                dataKey="issue"
                position="insideLeft"
                offset={8}
                style={{ fill: "var(--primary-foreground)" }}
                fontSize={12}
              />
              <LabelList
                dataKey="rate"
                position="right"
                offset={8}
                style={{ fill: "var(--primary)" }}
                fontSize={12}
                formatter={(value) => `${value} %`}
              />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
